<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">打卡吧 呆宝</block>
		</cu-custom>
		<!-- #endif -->
		<view class="wrap">
			
			<view class="u-tabs-box ">
				<u-tabs-swiper
					ref="tabs" 
					active-color="#3b95ed"
					:list="list"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="750"
					bar-width="60"
				></u-tabs-swiper>
			</view>
			<u-gap height="80"></u-gap>
			<swiper class="swiper-box " :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view :refresher-threshold="100" 
					  :refresher-triggered="refresherFlag" refresher-background="#F1F1F1" scroll-y style="height: 100%;width: 100%;" >
						<view class="page-box yu-box ">
							<imt-calendar :selected="recordList" style="margin: 10rpx auto"></imt-calendar>
						</view>
						
				    </scroll-view>
			    </swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-threshold="100"   @refresherrefresh ="reachTop"
					 :refresher-enabled="true" :refresher-triggered="refresherFlag" refresher-background="#F1F1F1">
						<view class="padding-top-sm">
							<u-cell-group>
								<u-cell-item  @click="openModel(item)"  v-for="(item,index) in prizeList" :icon="item.img" :title="item.name" :arrow="true" :icon-style="{color:'#0ebeaa'}"></u-cell-item>
							</u-cell-group>
						</view>
						<u-modal v-model="showModel" :title="'劵码值：'+prize.prizeCode" :show-cancel-button="true" cancel-text="复制" @cancel="copyCode(prize.prizeCode)">
							<view class="slot-content padding" >
								<view class="padding">
									<u-image width="100%" height="420rpx" :src="prize.codeUrl" @click="previewImage(prize.codeUrl)"></u-image>
								</view>
								<text>{{prize.desc}}</text>
							</view>
						</u-modal>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" v-if="isAdmin">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :refresher-threshold="100"   @refresherrefresh ="reachTop"
					 :refresher-enabled="true" :refresher-triggered="refresherFlag" refresher-background="#F1F1F1">
						<u-gap height="40"></u-gap>
						<view class="padding bg-white " style="border-radius: 10rpx;">
							<u-gap height="80"></u-gap>
							<u-button type="primary" :plain="true" @click="scanCode">扫码核销</u-button>
							<u-gap height="80"></u-gap>
							<u-search input-align="center" v-model="prizeCode" @search="submitVerifyPrize" shape="square" placeholder="劵码值" height="70" action-text="核销"></u-search>
							<u-gap height="180"></u-gap>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import imtCalendar from 'components/yr/imt-calendar/imt-calendar'
	export default {
		data() {
			return {
				list: [
					{
						name: '打卡记录'
					},
					{
						name: '领奖记录'
					}
				],
				current: 0,
				swiperCurrent: 0,
				refresherFlag:false,
				dateList:[],
				prizeList:[],
				prize:{},
				showModel: false,
				isAdmin:false,
				prizeCode:undefined,
				recordList:[]
			}
		},
		onShow() {
			this.listRecord();
			this.listPrizeInstance();
		},
		onLoad() {
			this.share();
			this.authScanCode();
		},
		methods:{
			openModel(item){
				this.prize = item;
				this.showModel = true;
			},
			reachTop(){
				this.refresherFlag = 'triggered';
				this.listPrizeInstance();
			},
			listPrizeInstance(){
				this.$u.api.listPrizeInstance().then(res => {
					this.prizeList = res.data;
					this.refresherFlag = false;
				});
			},
			listRecord(){
				this.$u.api.recordList().then(res => {
					this.recordList = res.data;
					console.log(this.recordList);
				});
			},
			// 页面数据
			// tab栏切换
			listTime(){
				this.$u.api.listTime().then(res => {
					this.dateList = res.data;
				});
			},
			change(index) {
				this.swiperCurrent = index;
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			copyCode(prizeCode){
				uni.setClipboardData({
				    data: prizeCode,
					showToast:false,
				    success: function () {
						uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: "已复制："+prizeCode });
				    }
				});
			},
			previewImage(url){
				uni.previewImage({
					urls:[url]
				})
			},
			share(){
				uni.showShareMenu({
					title:'打卡吧呆宝'
				})
			},
			authScanCode(){
				this.isAdmin = this.vuex_user.userId==1;
				if(!this.isAdmin){
					return;
				}
				if(this.list.length<3){
					this.list.push({name: '核销兑奖'})
				}
			},
			submitVerifyPrize(){
				this.verifyPrize(this.prizeCode)
			},
			scanCode(){
				let _this = this;
				wx.scanCode({
					success: (res) => {
						var prizeCode = res.result;
						console.log(prizeCode);
						_this.verifyPrize(prizeCode)
					}
				})
			},
			verifyPrize(prizeCode){
				this.$u.api.verifyPrize(prizeCode).then(res => {
					uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: res.msg });
				});
			}
		},
		components: {
			imtCalendar
		}
	}
</script>

<style lang="stylus" scoped>
.u-tabs-box
	position fixed
	width 100%
	z-index 99999
.status_bar
	height var(--status-bar-height)
	width 100%
	background-color #fff
	.top_view
		height var(--status-bar-height)
		width 100%
		position fixed
		background-color #fff
		top 0
		z-index 999
.yu-box
	padding 15rpx
	display flex
	flex-wrap wrap 
	.poetry-box
		width 50%
		.u-card__head
			padding 0 !important
.wrap
	display flex
	flex-direction column
	height calc(100vh - 120rpx)
	width 100%
.swiper-box
	flex 1
.swiper-item
	height 100%
.u-body-item-title
	font-weight 500
</style>
